import React from 'react'

const ActionSheetPanel = ({ options, desc, onSelect, onCancel }) => (
  <div>
    <div className='action-sheet-mask'>{null}</div>
    <div className='action-sheet-panel-box' onClick={onCancel}>
      <div className='action-sheet-panel'>
        <ul className='action-sheet-options'>
          {
            options.map((option, index) => (
              <li
                key={option.toString()}
                onClick={e => onSelect(index, e)}
              >{option}</li>
            ))
          }
        </ul>
        <span className='action-sheet-spliter'>{null}</span>
        <div
          className='action-sheet-cancel'
          onClick={onCancel}
        >
          取消
        </div>
      </div>
    </div>
  </div>
)

export default ActionSheetPanel
